var banner = $(".imgBox");
var timeout = null;
var listItem = $(".banner li");
var bannerIndex = 0;

function listItemActive() {
    listItem.eq(bannerIndex).addClass("active").siblings().removeClass("active");
}

listItemActive();

listItem.on("click", function () {
    bannerIndex = $(this).index();
    listItemActive();
    clearInterval(timmer);
    banner[0].style.left = -750 - $(this).index() * 750 + "px";

    timmer = setInterval(function () {
        if (timeout) {
            clearTimeout(timeout);
        }
        banner[0].style.left = -750 - bannerIndex * 750 + "px";
        bannerIndex++;
        listItemActive();

        if (bannerIndex == 5) {
            bannerIndex = 0;
            listItemActive();
            timeout = setTimeout(function () {
                banner[0].style.transition = "none";
                banner[0].style.left = -750 + "px";
                setTimeout(function () {
                    banner[0].style.transition = "all 1s";
                }, 100)
            }, 1000)
        }
    }, 5000);
})


timmer = setInterval(function () {
    if (timeout) {
        clearTimeout(timeout);
    }
    banner[0].style.left = banner.offset().left - 750 + "px";
    bannerIndex++;
    listItemActive();

    if (bannerIndex == 5) {
        bannerIndex = 0;
        listItemActive();
        timeout = setTimeout(function () {
            banner[0].style.transition = "none";
            banner[0].style.left = -750 + "px";
            setTimeout(function () {
                banner[0].style.transition = "all 1s";
            }, 100)
        }, 1000)
    }
}, 5000);

$(window).scroll(function () {
    if ($(document).scrollTop() > 75) {
        $("header").css({
            "background-color": "#fff"
        });
        $("header input").css({
            "border": "1px solid #000"
        });
        $("header .myp").css("background-position", "0 -155px");
        $("header span").css({
            "color": "#000"
        });

    } else {
        $("header").css({
            "background-color": "transparent"
        });
        $("header input").css({
            "border-style": "none"
        });
        $("header .myp").css("background-position", "0 -70px");
        $("header span").css({
            "color": "#fff"
        });
    }
});